<template>
  <div class="locate-blk">
    <el-tree
      :data="treeData"
      node-key="id"
      :props="defaultProps"
      @node-click="handleNodeClick"
      unselectable="on"
      :expand-on-click-node="false"
      :default-expanded-keys="defaultExpandedKeys"
      :indent="36"
    >
      <div
        class="tree-node"
        :class="{ active: activeDataId == node.data.id }"
        slot-scope="{ node, data }"
      >
        {{ data.name }}
      </div>
    </el-tree>
  </div>
</template>
<script>
import AMap from "AMap";
let map = null;
let marker = null;
let district = null;
let placeSearch = null;
export default {
  name: "Location",
  props: {
    unitType: {
      type: Object,
      default() {
        return null;
      },
    },
    fireRatingId: {
      type: String,
      default: "",
    },
  },
  computed: {
    defaultExpandedKeys() {
      if (this.unitType) {
        return [this.unitType.id];
      }
      return [];
    },
  },
  watch: {
    fireRatingId() {
      console.log(this.fireRatingId);
      this.getData();
    },
  },
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: "businessTypes",
        label: "name",
      },
      activeDataId: "",
      selected: null,
    };
  },
  methods: {
    getData() {
      let fireRatingId;
      if (this.fireRatingId == "001e7548-8735-4b31-b30b-c9361a62c904") {
        fireRatingId = "";
      } else {
        fireRatingId = this.fireRatingId;
      }
      this.$get("/business/business/unitCategoryList", { fireRatingId }).then(
        (res) => {
          this.treeData = res.data;
        },
        (err) => {
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    handleNodeClick(data, node, n) {
      this.activeDataId = data.id;
      this.selected = data;
    },
    getSelected() {
      return this.selected;
    },
  },
  mounted() {
    this.getData();
    if (this.unitType) {
      this.activeDataId = this.unitType.id;
      this.selected = this.unitType;
    }
  },
  destroyed() {
    //
  },
};
</script>
<style lang="less" scoped>
.locate-map {
  width: 100%;
  height: 400px;
}
</style>
